//git config --global user.name '冯净修' 
//git config --global user.email '15167825239@163.com'
//git add .
//git commit -m ""
//git push -u origin master

<script lang="ts" setup>
    import { ref,reactive, computed ,watch,watchEffect} from 'vue';
    // import { type yyy } from "@/type";
    // defineProps<yyy>() 老子给儿子传数据的
    let body = ref("bbbb")
    defineProps<{
        items:{title:string,content:string}[]
    }>()
</script>



<template>
<!-- <ul>
    <li v-for="x in xxx" :key="x.id">{{ x.id }}-{{ x.name }}-{{ x.age }}</li>
</ul> -->
<!-- <div>这是儿子上</div>

<slot></slot>   默认插槽
<slot name="header"></slot>     具名插槽
<slot :name="body"></slot>       动态插槽

<div>这是儿子下</div> -->
<!-- <hr> -->
<div class="mylist">

    <header>
    <slot name="header" :nums="items.length">
        <h1>默认标题:有{{ items.length }}本书</h1>
    </slot>
    </header>

    <ul>
        <li v-for="(item,index) in items" :key="index">
            <slot :it="item" :ind="index">
                <!-- //如果父亲没有传数据就用这里的 -->
                {{ item.title }}-{{ item.content }}   
                
            </slot>
        </li>
    </ul>

    <footer>
    <slot name="footer" >
        <h4>底部默认信息</h4>
    </slot>    
    </footer>
</div>
</template>



<style scoped>

    .mylist{
        border: 1px solid #acc;
        border-radius: 6px;
        background-color: aqua;
        padding: 10px;
    }

</style>
